<template>
    <div class="contentmain">
        <el-row>
            <el-col :span="14">
                <el-button type="danger" icon="el-icon-plus" @click="newadd">新增</el-button>
            </el-col>
            <el-col :span="10">
                帮助提示：<span v-if="changecapions">{{capion}}</span> 
                <el-input type="textarea" v-model="capion" style="width:60%" v-if="changecapion"></el-input>
                <el-button type="primary" style="float:right" size="mini" @click="capions" v-if="changecapions">编辑</el-button>
                <el-button type="info" style="float:right" size="mini" @click="celCapion" v-if="changecapion">取消</el-button>
                <el-button type="success" style="float:right" size="mini" @click="saveCapion" v-if="changecapion">保存</el-button>
            </el-col>
        </el-row>
        <!-- 新增 -->
        <el-table class="table-data" :data="td" style="width: 100%;margin-top: 20px"
                    v-loading="loading"
                    element-loading-text="数据加载中..." >
            <el-table-column label="充值项ID" prop="id"></el-table-column>
            <el-table-column label="充值项类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type==1">常规充值</el-tag>
                    <el-tag v-if="scope.row.type==2" type="success">充值送余额</el-tag>
                    <el-tag v-if="scope.row.type==3" type="info">充值送劵</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="充值金额" prop="depositAmount"></el-table-column>
            <el-table-column label="文字描述" prop="remark"></el-table-column>
            <el-table-column label="赠送金额" prop="presentedAmount"></el-table-column>
            <el-table-column label="优惠券ID" prop="couponId"></el-table-column>
            <el-table-column label="是否启用">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status==0">启用</el-tag>
                    <el-tag v-if="scope.row.status==1" type="success">不启用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="260">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="Edit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="Del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 -->
        <el-dialog :title="openId==-1?'新增':'修改'" :visible.sync="open" :before-close="close" append-to-body>
            <CouLists @getcousid="getcousid"/>
            <el-form :model="f" status-icon label-width="150px" style="width:70%">
                <el-form-item label="是否启用">
                    <el-radio-group v-model="status">
                        <el-radio-button label="启用" />
                        <el-radio-button label="不启用" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="充值类型">
                    <el-radio-group v-model="type" @change="clt">
                        <el-radio-button label="常规" />
                        <el-radio-button label="充值送券" />
                        <el-radio-button label="充值送余额" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="充值金额">
                    <el-input type="text" v-model="f.depositAmount"></el-input>
                </el-form-item>
                <el-form-item label="文字描述">
                    <el-input type="text" v-model="f.remark"></el-input>
                </el-form-item>
                <el-form-item label="充值送券" v-if="type=='充值送券'">
                    <el-input type="text" v-model="couponId" disabled="true"></el-input>
                    <el-button @click="getgood()">选择优惠券</el-button>
                </el-form-item>
                <el-form-item label="赠送金额" v-if="type=='充值送余额'">
                    <el-input type="text" v-model="f.presentedAmount"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 表单 -->
    </div>
</template>
<script>
import CouLists from 'components/Coupon/CouLists'
export default {
    data(){
        return{
            f:{},
            td:[],
            open:false,
            openId:-1,
            loading:false,
            status:"启用",
            type:"常规",
            couponId:'',
            capion:'',
            changecapion:false,
            changecapions:true
        }
    },
    components:{
        CouLists
    },
    mounted(){
        this.getData()
    },
    methods:{
        capions(){//编辑
            this.changecapion=true
            this.changecapions=false
        },
        celCapion(){//取消
            this.changecapion=false
            this.changecapions=true
        },
        saveCapion(){//保存帮助提示
            let _this=this
            let params={
                capion:this.capion
            }
            axios.get('/saveDepositCapion.do',{params:params}).then(r=>{
                if(r.data.code==200){
                    _this.$message.success("保存成功")
                    _this.getData()
                    _this.changecapion=false
                    _this.changecapions=true
                }else{
                    _this.$message.error(r.data.message)
                }
            })
        },
        close(){//关闭
            this.f={}
            this.type="常规"
            this.status="启用"
            this.openId=-1
            this.open=false
        },
        getcousid(v){//获取优惠券id
            this.couponId=''
            this.couponId=v
        },
        getgood(){//打开优惠券弹窗
            this.$store.commit('ChangeCouLists')
        },
        newadd(){
          this.open=true  
        },
        Edit(r){//编辑
            this.openId=r.id
            if(r.type==1){
                this.type="常规"
            }else if(r.type==2){
                this.type="充值送余额"
                this.f.presentedAmount=r.presentedAmount
            }else if(r.type==3){
                this.type="充值送券"
                this.couponId=r.couponId
            }
            if(r.status==0){
                this.status="启用"
            }else if(r.status==1){
                this.status="不启用"
            }
            this.f.depositAmount=r.depositAmount
            this.f.remark=r.remark
            this.open=true
        },
        Del(r){//删除
            var _this=this
            this.$confirm('确认删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            var param = new URLSearchParams();
            param.append("Ids",r.id);
            axios.get("/delDepositInfos.do",{params:param}).then(r=>{
                if(r.data.code==200){
                    _this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    _this.getData()
                }else{
                    _this.$message.error(r.data.message)
                }
            })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        save(){//保存
            var _this=this
            //验证
            if(this.f.depositAmount==''){
                this.$message.error("充值金额不能为空")
                return
            }
            if(this.f.remark==''){
                this.$message.error("描述不能为空")
                return
            }
            if(this.couponId==''&&this.type=='充值送券'){
                this.$message.error("请选择优惠券")
                return
            }
            if(this.f.presentedAmount==''&&this.type=='充值送余额'){
                this.$message.error("请填写充值赠送余额")
                return
            }
            let params={
                depositAmount:this.f.depositAmount,
                remark:this.f.remark,
                delStatus:0,
                presentedAmount:0,
                couponId:0
            }
            if(this.type=="充值送券"){
                params.type=3
                params.couponId=this.couponId
            }else if(this.type=="充值送余额"){
                params.type=2
                params.presentedAmount=this.f.presentedAmount
            }else if(this.type=="常规"){
                params.type=1
            }

            if(this.status=="启用"){
                params.status=0
            }else if(this.status=="不启用"){
                params.status=1
            }

            if(this.openId==-1){
                axios.get('/saveDepositInfos.do',{params:params}).then(r=>{
                    if(r.data.code==200){
                        _this.$message.success("添加成功")
                        _this.getData()
                        _this.close()
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
            }else{
                params.id=this.openId
                axios.get('/updateDepositInfos.do',{params:params}).then(r=>{
                    if(r.data.code==200){
                        _this.$message.success("修改成功")
                        _this.getData()
                        _this.close()
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
            }
        },
        getData(){//获取数据
            var _this=this
            this.loading=true
            axios.get('/listDepositInfos.do').then(r=>{
                if(r.data.code==200){
                    _this.td=[].concat(r.data.response.depositInfoList)
                    _this.capion=r.data.response.depositCapion
                    _this.loading=false
                }else{
                    if(r.data.message=="not login"&&r.data.code==500){
                        _this.$message.error("访问者,请登录")
                        router.push('/Login');
                    }else{
                        _this.$message.error(r.data.message)
                        _this.loading=false
                    }
                }
            })
        }
    }
}
</script>
